<script setup lang="ts">
import type { FormRules } from "element-plus"
import type { ForgetRequestData } from "./apis/type"
// import { Key, Loading, Lock, Picture, User } from "@element-plus/icons-vue"
import { useSettingsStore } from "@/pinia/stores/settings"
import { useUserStore } from "@/pinia/stores/user"
import { forgetApi, sendCodeApi } from "./apis"
import { useFocus } from "./composables/useFocus"
import {SendFormData} from "./apis/type";

const router = useRouter()
const checkCode = ref(true)
const userStore = useUserStore()

const settingsStore = useSettingsStore()

const { isFocus, handleBlur, handleFocus } = useFocus()
// 登录协议对话框
const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
const countTime = ref(0)
const checked = ref(true)
/** 重置表单元素的引用 */
const forgetFormRef = useTemplateRef("forgetFormRef")

/** 重置按钮 Loading */
const loading = ref(false)

/** 重置密码表单数据 */
const forgetFormData: ForgetRequestData = reactive({
  username: "",
  code: "666666",
  newPassword: null,
  rePassword: null
})
/** 重置密码表单数据 */
const sendCodeFormData: SendFormData = reactive({
  username: ""
})
/** 登录表单校验规则 */
const forgetFormRules: FormRules = {
  username: [
    { required: true, message: "请输入用户名/账号", trigger: "blur" },
    { min: 11, max: 11, message: "请输入长度在11个手机号码", trigger: "blur" }
  ],
  newPassword: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 16, message: "请输入长度在 6 到 16 个密码字符", trigger: "blur" }
  ],
  rePassword: [
    { required: true, message: "请再次输入密码", trigger: "blur" },
    { min: 6, max: 16, message: "请输入长度在 6 到 16 个密码字符", trigger: "blur" }
  ],
  code: [
    { required: true, message: "请输入验证码", trigger: "blur" },
    { min: 6, max: 6, message: "请输入长度在6个验证码字符", trigger: "blur" }
  ]
}
function sendCode () {
  sendCodeFormData.username = forgetFormData.username
  // 判断sendCodeFormData.username 格式是否是手机号码
  if (!/^1[3456789]\d{9}$/.test(sendCodeFormData.username)) {
    ElMessage.error({
      message: "手机号码格式不正确！",
      type: "warning",
      duration: 2000
    })
    return false
  }
  // 发送验证码请求
  sendCodeApi(sendCodeFormData).then(({ code }) => {
    if (code == 0) {
      ElMessage.success({
        message: "验证码发送成功！",
        type: "warning",
        duration: 2000
      })
    }
  })
  loading.value = true
  dialogVisible.value = true
  // 定时器计算60秒，60秒内按钮禁用
  const timer = setInterval(() => {
    if (timer) {
      if (countTime.value >= 60) {
        loading.value = false
        clearInterval(timer);
      }
      countTime.value++;
    }
  }, 1000)
}
/** 登录 */
function handleforget() {
  forgetFormRef.value?.validate((valid) => {
    if (!valid) {
      return
    }
    loading.value = true
    forgetApi(forgetFormData).then(({ code }) => {
      if (code == 0) {
        ElMessage.success({
          message: "修改新密码成功！",
          type: "warning",
          duration: 2000
        })
      }
    }).catch(() => {
      ElMessage.error({
        message: "验证失败，消息将在 2 秒后关闭",
        type: "warning",
        duration: 2000
      })
    })
  })
}
</script>

<template>
  <div class="login-container" >
    <div class="content">
      <div class="tab-nav">
        <div class="tab-item">
          重 置 密 码
        </div>
        <!-- <a href="/#/login3" class="">
          <div class="tab-item">
            短信登录
          </div></a>
        <a href="/#/wechatlogin" class="">
          <div class="tab-item">
            微信登录
          </div></a>-->
      </div>
      <el-form ref="forgetFormRef" :model="forgetFormData" :rules="forgetFormRules" @keyup.enter="handleforget">
        <div class="form-content">
          <el-form-item prop="username">
            <div class="form-item">
              <label for="id1" class="accout" />
              <input id="id1" v-model.trim="forgetFormData.username" type="text" placeholder="请输入手机号码">
            </div>
          </el-form-item>
          <el-form-item prop="code">
            <div class="form-item" style="display: flex;flex-direction: row;justify-content: space-between;">
              <label for="id2" class="password" />
              <input id="id2" style="width:285px;" v-model.trim="forgetFormData.code" placeholder="请输入验证码">
              <el-button type="primary" class="getCode" :disabled="forgetFormData.username.length != 11" style="width: 120px;" v-if="!loading" @click.prevent="sendCode"> 发送验证码 </el-button>
              <el-button class="default getCode" disabled v-if="loading" > {{countTime}} 后重新发送</el-button>
            </div>
          </el-form-item>

          <el-form-item prop="newPassword" v-if="checkCode">
            <div class="form-item">
              <label for="id3" class="password" />
              <input id="id3" type="password" v-model.trim="forgetFormData.newPassword" placeholder="请输入新密码">
            </div>
          </el-form-item>
          <el-form-item prop="rePassword" v-if="checkCode">
            <div class="form-item">
              <label for="id4" class="password" />
              <input id="id4" type="password" v-model.trim="forgetFormData.rePassword" placeholder="请再次输入新密码">
            </div>
          </el-form-item>

          <!-- <div class="agree" style="margin-top: 20px;">
            <label class="el-checkbox">
              <span class="el-checkbox__input">
                <input class="el-checkbox__original" type="checkbox" aria-hidden="false" value="记住密码">
                <span class="el-checkbox__inner" /></span>
              <span class="el-checkbox__label">记住密码</span>
            </label>
          </div> -->
          <button type="button" class="submit" @click.prevent="handleforget">
            重置密码
          </button>
          <div class="tip">
            <div class="hasAccout">
              <span>还没有账号？</span>
              <a href="/#/register" class=""><span class="goLogin">立即注册</span></a>
            </div>
            <div class="forget">
              <a href="/#/" class=""><span class="forget-text">返回首页</span></a>
            </div>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<style>
.container {
  width: 100%;
  height: 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content {
  width: 736px;
  height: 688px;
  background: #ffffff;
  border-radius: 30px;
  overflow: hidden;
}
.tab-nav {
  margin-top: 80px;
  display: flex;
  justify-content: center;
}

.form-item {
  width: 480px;
  height: 60px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
  margin: 0 auto 40px;
  display: flex;
  align-items: center;
  padding: 0 22px;
  box-sizing: border-box;
  position: relative;
}

.agree {
  width: 410px;
  height: 20px;
  margin: 0 auto;
  cursor: pointer;
  font-size: 18px;
  color: #333;
}

.tip {
  width: 410px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.current {
  color: #45a1ff;
  margin-right: 100px;
}

.submit {
  display: block;
  width: 380px;
  height: 50px;
  line-height: 50px;
  background: #45a1ff;
  border-radius: 5px;
  font-size: 22px;
  color: #fff;
  letter-spacing: 6px;
  text-align: center;
  border: none;
  margin: 30px auto 10px;
  cursor: pointer;
}
.accout {
  display: block;
  width: 17px;
  height: 25px;
  background: url() no-repeat center center / 100%;
}
.form-item input {
  height: 25px;
  width: 400px;
  margin-left: 22px;
  border: none;
  background-color: transparent;
  padding-left: 20px;
  border-left: 1px solid rgba(0, 0, 0, .3);
  box-sizing: border-box;
  outline: none;
}
.password {
  display: block;
  width: 20px;
  height: 25px;
  background: url() no-repeat center center / 100%;
}
.tab-item {
  font-family: xiaomi;
  color: #333;
  font-size: 28px;
  line-height: 37px;
  text-align: center;
  cursor: pointer;
}
.tab-nav {
  margin-top: 80px;
  display: flex;
  justify-content: center;
}
.current {
  color: #45a1ff;
  margin-right: 100px;
}
.form-content {
  margin-top: 32px;
}
.tip .goLogin {
  color: #45a1ff;
}
.forget .forget-text {
  font-size: 16px;
  color: #45a1ff;
  line-height: 18px;
}
.el-checkbox__label {
  display: inline-block;
  padding-left: 8px;
  line-height: 1;
  font-size: var(--el-checkbox-font-size);
}
.agree {
  width: 410px;
  height: 20px;
  margin: 0 auto;
  cursor: pointer;
  font-size: 18px;
  color: #333;
}
.el-form-item__error {
  padding-left: 190px;
  top: 70px;
  font-size: 14px;
}
.form-item {
  margin: 0 auto 14px;
}
.el-form-item {
  margin-bottom: 20px;
}
.getCode {
  width: 120px;
}
</style>
